<!DOCTYPE html>  
<meta charset="utf-8" />  
<title>iBoard Test</title>  

<link rel="stylesheet" type="text/css" href="css/ui-darkness/jquery-ui-1.8.4.custom.css" />

<style>
  .area {
    border: 1px solid blue;
  }

  .general {
    padding: 1%; 
  }

  #chatarea {
    width: 25%; 
    float: left;
    margin-right: 1%;
    height: 500px;
  } 
  #canvasarea {
    width: 65%; 
    height: 500px;
    float: left;
  } 

  #output {
    border: 1px solid blue;
    width: 100%;
    overflow: auto;
    height: 380px;
  }

  #msg, #name {
    width: 96%;
  }

  #canvas_id {
    border: 1px solid #ddd;
    cursor: pointer;
  }

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="bbox.js"></script>

<script language="javascript" type="text/javascript">  

var drawflag = 0;
var selected = -1;
var dragged = -1;
var cctx = null;
var debugflag = 5;
var eraseflag = 0;
var xmax = 0;
var xmin = 0;
var ymax = 0;
var ymin = 0;
var boxes = new Array();
var currpath = new Array();

var settings = {
  'bgColor': '#fff',
  'borderWidth': 1,
  'lineWidth': 2,
  'eraseWidth': 20,
  'width' : 620,
  'height' : 420,
  'gridsize' : 10,
  'lineColor': '#111'
};


$(function() {
  initCanvas();
  $("#erase_btn").button();
  $("#erase_btn").bind('click', erase);
  $("#black_btn").button();
  $("#black_btn").bind('click', black);
})


function erase() {
  writeDebug("setting eraser", 5);
}


function black() {
  writeDebug("setting pencil to black", 5);
  b = new BBox(100, 100, 100, 100);
  b.draw();
  boxes.push(b);
}


function clearCanvas() {
  var can = document.getElementById("canvas_id");
  can.width = 2;
  can.width = settings.width.toString();
}


function writeDebug(message, level) {
    if(debugflag >= level) {
      $("#output").append(message + '<br>');
    }
}


function initCanvas()
{
  var can = document.getElementById("canvas_id");
  cctx = can.getContext("2d");
  $("#canvas_id").mousedown(mousedown);
  $("#canvas_id").mousemove(mousemove);
  $("#canvas_id").mouseup(mouseup);
  $("#canvas_id").bind('touchstart', touchstart);
  $("#canvas_id").bind('touchmove', touchmove);
  $("#canvas_id").bind('touchend', touchend);
  $("#canvas_id").mouseleave(mouseleave);
  $("#canvas_id").dblclick(dblclick);
  can.width = settings.width.toString();
  can.height = settings.height.toString();

  cctx.strokeStyle = settings.lineColor;
  cctx.lineWidth = settings.lineWidth;
  cctx.strokeRect(50.5, 50.5, settings.gridsize, settings.gridsize);

  //var b = new BBox(200.5, 100.5, 50, 50);
  //boxes.push(b);

  writeDebug("initCanvas: created canvas ctx = " + cctx, 5);
}


function mousedown(e) {
  writeDebug("mousedown: " + e.pageX + " " + e.pageY, 9);
  var pt = {
    'X' : e.pageX - this.offsetLeft, 
    'Y' : e.pageY - this.offsetTop
  }
  pendown(pt);
}

function touchstart(e) {
  e.preventDefault();
  var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
  writeDebug("touchstart: " + touch.pageX + " " + touch.pageY, 5);
  var pt = {
    'X' : touch.pageX - this.offsetLeft, 
    'Y' : touch.pageY - this.offsetTop
  }
  pendown(pt);
}


function pendown(pt) {
  var len = boxes.length;
  var i = 0;

  writeDebug("pendown: " + pt.X + " " + pt.Y, 5);

  for(i=0; i<len; i++) {
    if(boxes[i].isSelected(pt.X, pt.Y)) {
      selected = i;
      writeDebug("pendown: a box at index " + i + " was selected id: " + boxes[i].id, 5);

      break;
    }
  }

  //unhighlight bbox that might be highlighted, except the one thats selected
  var len = boxes.length;
  for(var i=0; i<len; i++) {
    if(i != selected) {
      boxes[i].unhighlight();
    }
  }
  redrawCanvas();

  //if a bounding box is selected pass on the event to it
  if(selected >= 0) {
      boxes[selected].pendown(pt);
  }
  else {
    drawflag = 1;
    cctx.beginPath();
    cctx.moveTo(pt.X, pt.Y);
    currpath = [];
    currpath.push(pt);
    //reset the min/max to pendown point and zero
    xmin = pt.X;
    ymin = pt.Y;
    xmax = 0;
    ymax = 0;
  }
}


function mousemove(e) {
  writeDebug("mousemove: " + e.pageX + " " + e.pageY, 9);
  var pt = {
    'X' : e.pageX - this.offsetLeft, 
    'Y' : e.pageY - this.offsetTop
  }
  penmove(pt); 
}


function touchmove(e) {
  e.preventDefault();
  var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
  writeDebug("touchmove: " + e.originalEvent.touches[0].pageX + " " + e.originalEvent.touches[0].pageY, 9);
  var pt = {
    'X' : touch.pageX - this.offsetLeft, 
    'Y' : touch.pageY - this.offsetTop
  }
  penmove(pt); 
}


function penmove(pt) {
  if(selected >= 0) {
    boxes[selected].penmove(pt);
  }
  else {
    if(drawflag === 1) {
      writeDebug("penmove: free draw" + pt.X + " " + pt.Y, 9);
      cctx.lineTo(pt.X, pt.Y);
      cctx.stroke();
      //find bounding x y
      if (pt.X < xmin) {
        xmin = pt.X;
      }
      if (pt.X > xmax) {
        xmax = pt.X;
      }
      if (pt.Y < ymin) {
        ymin = pt.Y;
      }
      if (pt.Y > ymax) {
        ymax = pt.Y;
      }
      dragged = 1;
      currpath.push(pt);
    }
  }
}


function mouseup(e) {
  writeDebug("mouseup: " + e.pageX + " " + e.pageY, 9);
  var pt = {
    'X' : e.pageX - this.offsetLeft,
    'Y' : e.pageY - this.offsetTop
  }
  penup(pt); 
}

function touchend(e) {
  e.preventDefault();
  var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
  writeDebug("touchend: " + touch.pageX + " " + touch.pageY, 5);
  var pt = {
    'X' : touch.pageX - this.offsetLeft, 
    'Y' : touch.pageY - this.offsetTop
  }
  penup(pt); 
}


function penup(pt) {

  //bbox selected, send the penup to the box
  if(selected >= 0) {
    boxes[selected].penup(pt);
    selected = -1;
  }
  else { //free drawing
    drawflag = 0;
    writeDebug("penup: " + pt.X + " " + pt.Y, 5);
    if(dragged == 1) {
      dragged = 0;
      cctx.closePath();
      //detect shape
      //create bbox
      var b = new BBox(xmin, ymin, xmax-xmin, ymax-ymin);
      b.path = currpath;
      boxes.push(b);
    }
  }
}


function mouseleave(e) {
  if(drawflag === 1) {
    drawflag = 0;
  }
  writeDebug("mouseleave: " + e.pageX + " " + e.pageY, 7);
}

function dblclick(e) {
  e.preventDefault();
  writeDebug("dblclick: avoid", 5);
}

function redrawCanvas() {
  writeDebug("redrawCanvas: " + boxes.length, 5);
  cctx.clearRect(0, 0, settings.width, settings.height);
  if(settings.grid == 1) {
    //drawGrid();
  }
  var len = boxes.length;
  for(var i=0; i<len; i++) {
    boxes[i].redraw();
  }
}

</script>

<h2>iBoard</h2>  
  <div>
    <div id="chatarea" class="area general">
      <br>
      <div id="output"></div>
      <br>
      <div style="clear: both;"> </div>
    </div>
    <div id="canvasarea" class="area general">
      <!-- <canvas id="canvas_id" width="400" height="300"></canvas> -->
      <canvas id="canvas_id"></canvas>
      <br>
      <button id='erase_btn'>erase</button>
      <button id='black_btn'>black</button>
    </div>
    <div style="clear: both;">
    </div>
  </div>
</html>
